<template>
  <div class="user-comment">
    <p class="comm-title">我的书评</p>
    <div class="comm-item" v-for="item in allComment.list" :key="item.id">
      <div class="comm-pic">
        <img :src="item.createUserPhoto?item.createUserPhoto:require('../../assets/images/man.png')" alt="" class="comm-avatar">
      </div>
      <div class="comm-cont">
        <p class="comm-username">{{item.createUserName}}</p>
        <div class="comm-text">{{item.commentContent}}</div>
        <p class="comm-time">{{item.createTime}}</p>
      </div>
    </div>
    <el-pagination class="all-book-pagination" v-if="allComment.total > 0"
      background
      :layout="'prev, '+(global.isPc?'pager,':'')+'next, jumper, ->, total, slot'"
      :total="allComment.total"
      :page-count="allComment.pages"
      :current-page.sync="pageParam.curr"
      :page-size.sync="pageParam.limit"
      @current-change="handlerPageChange">
      <span v-if="!global.isPc" class="el-pagination-slot">{{allComment.pages}}页</span>
    </el-pagination>
  </div>
</template>

<script>
export default {
  data(){
    return {
      pageParam:{
        curr:1,
        limit:5
      },
      allComment:{
        list:[],
        total:0,
        pages:0
      },
    }
  },
  created(){
    this.listComment();
  },
  methods:{
    listComment(){
      this.$http.postForm('/user/listCommentByPage', this.pageParam, res=>{
        this.allComment.list = res.list;
        this.allComment.total = parseInt(res.total);
        this.allComment.pages = parseInt(res.pages);
      });
    },
    handlerPageChange(currentPage){
      this.pageParam.curr = currentPage;
      this.listComment();
    },
  }
}
</script>

<style lang='scss' scoped>
.user-comment {
  padding: 15px 25px;
  .comm-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
  }
  .comm-item {
    margin: 10px 0 0 0;
    border: 1px solid #EEEEEE;
    border-width: 1px 0 0 0;
    padding: 15px 0 0 0;
    .comm-pic {
      display: inline-block;
      width: 90px;
      .comm-avatar {
        width: 60px;
        height: 60px;
      }
    }
    .comm-cont {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 90px);
      .comm-username {
        font-size: 14px;
        color: #666666;
      }
      .comm-text {
        word-wrap: break-word;
        font-size: 13px;
      }
      .comm-time {
        color: #666666;
      }
    }
  }
  .all-book-pagination{
    padding: 10px 0 15px 0;
  }
}
</style>